---
title: Asides
description: Learn how to use asides in Starlight to display secondary information alongside a page’s main content.
---

import { Aside } from '@astrojs/starlight/components';

To display secondary information alongside a page’s main content, use the `<Aside>` component.

import Preview from '~/components/component-preview.astro';

<Preview>

<Aside slot="preview">
    Include nonessential, supplementary information in an `<Aside>`.
</Aside>

</Preview>

## Import

```tsx
import { Aside } from '@astrojs/starlight/components';
```

## Usage

Display an aside (also known as “admonitions” or “callouts”) using the `<Aside>` component.

An `<Aside>` can have an optional [`type`](#type) attribute, which controls the aside’s color, icon, and default title.

<Preview>

````mdx
import { Aside } from '@astrojs/starlight/components';

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

Other content is also supported in asides.

```js
// A code snippet, for example.
```

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>
````

<Fragment slot="markdoc">

````markdoc
{% aside %}
Some content in an aside.
{% /aside %}

{% aside type="caution" %}
Some cautionary content.
{% /aside %}

{% aside type="tip" %}
Other content is also supported in asides.

```js
// A code snippet, for example.
```
{% /aside %}

{% aside type="danger" %}
Do not give your password to anyone.
{% /aside %}
````

</Fragment>

<Fragment slot="preview">

    <Aside>Some content in an aside.</Aside>

    <Aside type="caution">Some cautionary content.</Aside>

    <Aside type="tip">

    Other content is also supported in asides.

    ```js
    // A code snippet, for example.
    ```

    </Aside>

    <Aside type="danger">Do not give your password to anyone.</Aside>

</Fragment>

</Preview>

Starlight also provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the `<Aside>` component.
See the [“Authoring Content in Markdown”](/guides/authoring-content/#asides) guide for details of the custom syntax.

### Use custom titles

Override the default aside titles by using the [`title`](#title) attribute.

<Preview>

```mdx 'title="Watch out!"'
import { Aside } from '@astrojs/starlight/components';

<Aside type="caution" title="Watch out!">
	A warning aside *with* a custom title.
</Aside>
```

<Fragment slot="markdoc">

```markdoc 'title="Watch out!"'
{% aside type="caution" title="Watch out!" %}
A warning aside *with* a custom title.
{% /aside %}
```

</Fragment>

<Aside slot="preview" type="caution" title="Watch out!">
	A warning aside *with* a custom title.
</Aside>

</Preview>

### Use custom icons

Override the default aside icons by using the [`icon`](#icon) attribute set to the name of [one of Starlight’s built-in icons](/reference/icons/#all-icons).

<Preview>

```mdx 'icon="starlight"'
import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" icon="starlight">
	A tip aside *with* a custom icon.
</Aside>
```

<Fragment slot="markdoc">

```markdoc 'icon="starlight"'
{% aside type="tip" icon="starlight" %}
A tip aside *with* a custom icon.
{% /aside %}
```

</Fragment>

<Aside slot="preview" type="tip" icon="starlight">
	A tip aside *with* a custom icon.
</Aside>

</Preview>

## `<Aside>` Props

**Implementation:** [`Aside.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Aside.astro)

The `<Aside>` component accepts the following props:

### `type`

**type:** `'note' | 'tip' | 'caution' | 'danger'`  
**default:** `'note'`

The type of aside to display:

- `note` asides (the default) are blue and display an information icon.
- `tip` asides are purple and display a rocket icon.
- `caution` asides are yellow and display a triangular warning icon.
- `danger` asides are red and display an octagonal warning icon.

### `title`

**type:** `string`

The title of the aside to display.
If `title` is not set, the default title for the current aside `type` will be used.

### `icon`

**type:** [`StarlightIcon`](/reference/icons/#starlighticon-type)

An aside can include an `icon` attribute set to the name of [one of Starlight’s built-in icons](/reference/icons/#all-icons).
